<template>
	<div class="jianjie-forum flex-page-wrapper">
		<uni-nav-bar statusBar color="" backgroundColor="#7350f5" title="" :height="0">
		</uni-nav-bar>
		<image class="head-img" src="https://static.inclusionconf.com/static/images/jianjie-page-head1-t1.png?t=3" mode="widthFix"></image>
		<div class="jianjie-content flex-page">
			<div class="jianjie-top">
				<div class="search-text" v-if="showSearch"><span>{{ $t('search') }}：</span></div>
				<block v-else>
					<div class="tabs" v-if="isPc">
						<div class="tab" @click="timeFn(index)" :class="activeTime === index ? 'active' : ''" v-for="(item, index) in times" :key="index"><span>{{ item['name' + En] }}</span></div>
					</div>
					<div class="tabs-wrapper" v-else id="jianjie-forum-tabs">
						<div class="tabs">
							<div class="tab" @click="timeFn(index)" :class="activeTime === index ? 'active' : ''" v-for="(item, index) in times" :key="index"><span>{{ item['name' + En] }}</span></div>
						</div>
					</div>
				</block>
				<div class="search">
					<input type="text" v-model="keywords" @keyup.enter="webForumList" :placeholder="En ? $t('placeholder') : '请输入论坛标题进行搜索'">
					<div class="i" v-if="showSearch">
						<image class="el-icon-search" @click="webForumList" src="https://static.inclusionconf.com/static/images/search-active.png" alt="">
					</div>
					<div class="i" v-else><img class="el-icon-search" @click="webForumList" src="https://static.inclusionconf.com/static/images/search-new.png" alt=""></div>
				</div>
			</div>

			<block v-if="!showSearch">
				<div class="times" :class="En ? 'times-en' : ''" v-if="isPc">
					<div class="item" :class="activeIndex === index ? 'active' : ''" v-for="(item, index) in tabs" @click="tabFn(index)" :key="index">{{ item['name' + En] }}</div>
				</div>
				<div class="times-wrapper" v-else id="jianjie-forum-times">
					<div class="times" :class="En ? 'times-en' : ''">
						<div class="item" :class="activeIndex === index ? 'active' : ''" v-for="(item, index) in tabs" @click="tabFn(index)" :key="index">{{ item['name' + En] }}</div>
					</div>
				</div>
			</block>

			<div class="list" :class="{ 'search-list': showSearch, 'list-en': En }">
				<div class="item" v-for="(item, index) in list" :key="index" @click="itemFn(item, index)" :class="{ 'small-padding-bottom': isPc || item.showWapJiabing, 'item-en': En }">
					<block v-if="En">
						<div class="en-left">
							<div class="en-left1">{{ item.forumDateValueEn }} {{ item.startTime }}-{{ item.endTime }}
							</div>
							<div class="en-left2">{{ item.forumAddrValueEn }}</div>
						</div>
						<div class="en-right" v-if="item.nameEn">
							<p class="ellipsis2">{{ item.nameEn }}</p>
						</div>
						<div class="en-right1" v-if="item.liveSts == 1" :class="item.playSts == 2 ? 'disabled' : ''">{{
                            $t('liveStatus' + item.playSts) }} <img :src="`https://static.inclusionconf.com/static/images/live-icon${item.playSts}.png`" alt=""> </div>
					</block>
					<block v-else>
						<div class="time">{{ item['forumDateValue' + En] }} {{ item.startTime }}-{{ item.endTime }}
						</div>
						<div class="title-wrapper">
							<div class="title ellipsis1" v-html="item['name' + En]"></div>
							<div class="play-status" :class="'play-status' + item.playSts" v-if="item.liveSts == 1 && isPc">{{ $t('liveStatus' + item.playSts) }}</div>
							<div class="detail">{{ En ? 'Details' : '查看详情' }}>></div>
						</div>
						<div class="text ellipsis1">{{ item['blurb' + En] }}</div>
						<div class="jiabings" v-if="isPc || (!isPc && item.showWapJiabing)" v-show="item.forumGuestList && item.forumGuestList.length">
							<div class="jiabings-content" v-if="item.forumGuestList">
								<div class="jiabing-item" v-for="(ite, ind) in item.forumGuestList" :key="index + 'e' + ind">
									<div class="pic" v-if="ite.photoImgUrl" :style="{ backgroundImage: `url(${ite.photoImgUrl})` }"></div>
									<div class="pic" v-else :style="{ backgroundImage: `url(https://static.inclusionconf.com/static/images/default-avatar-new.png)` }">
									</div>
									<div class="jiabing-text">
										<h3>{{ ite['name' + En] }}</h3>
										<p>{{ ite['position' + En] }}</p>
									</div>
								</div>
							</div>
							<div class="right-icon" v-if="domArr[index] && domArr[index].x != domArr[index].maxScrollX" @click.stop="rightFn(index)">
								<img src="https://static.inclusionconf.com/static/images/right-icon.png" alt="">
							</div>
							<div class="left-icon" v-if="domArr[index] && domArr[index].x != 0" @click.stop="leftFn(index)">
								<img src="https://static.inclusionconf.com/static/images/right-icon.png" alt="">
							</div>
						</div>
						<div v-if="!(item.forumGuestList && item.forumGuestList.length) && isPc" style="height: 30px;"></div>
						<div class="guan">
							<div class="left">
								<i>{{ item['forumAddrValue' + En] }}</i>
								<span v-if="!En">&nbsp;馆</span>
							</div>

							<div class="right">
								<img src="https://static.inclusionconf.com/static/images/company-icon.png" alt="">
								<div class="company ellipsis1" v-if="item.orgUnitList">
									<span v-for="(ite, ind) in item.orgUnitList" :key="index + 'abc' + ind">{{
                                        ite['name' + En] }}</span>
								</div>
							</div>
						</div>
						<img class="company-bottom" v-if="!isPc && !item.showWapJiabing" @click.stop="bottomFn(item)" src="https://static.inclusionconf.com/static/images/bottom.png" alt="">
						<div class="huifang" v-if="item.liveSts == 1 && !isPc">{{ $t('liveStatus' + item.playSts) }}</div>

						<block v-if="item.yaoyue">
							<div class="yuyue yuyue1">
								<big>定向邀约</big>
							</div>
						</block>
						<block v-else>
							<div class="yuyue" v-if="!item.yuyue && item.keyuyue" @click.stop="reservation(item)">
								<div class="big">{{ En ? 'Book Now' : '立即预约' }}</div>
							</div>
							<div class="yuyue yuyue1 disabled" v-if="item.yuyue && item.keyuyue" @click.stop="cancelReservation(item)">
								<div class="big">已预约</div>
							</div>
						</block>
					</block>
				</div>
			</div>
		</div>


		<liveMask v-if="showMask" @close="showMask = false" :detail="detail"></liveMask>
		<pub-mask v-if="showModify">
			<div class="status-mask">
				<div class="title">
					{{ $t('helper19') }}
				</div>
				<div class="content" v-html="$t('helper20')">
				</div>
				<div class="btns">
					<div class="btn" @click="showModify = false">{{ $t('secdetail3') }}</div>
					<div class="btn on" @click="modifyFnSec">{{ En ? 'Change' : '更换' }}</div>
				</div>
			</div>
		</pub-mask>
		<pub-mask v-if="showCancelReservation">
			<div class="status-mask">
				<div class="title">
					{{ $t('helper6') }}
				</div>
				<div class="content" style="height: 20px;"></div>
				<div class="btns">
					<div class="btn" @click="showCancelReservation = false">{{ $t('secdetail3') }}</div>
					<div class="btn on" @click="cancelReservationSec">{{ $t('secdetail2-1') }}</div>
				</div>
			</div>
		</pub-mask>
		<foot-wap :value="10"></foot-wap>
		<web-tips v-if="showTips"></web-tips>
	</div>
</template>

<script>
	import protal from "@/api/protal"

	export default {
		data() {
			return {
				showCancelReservation: false,
				showModify: false,
				showMask: false,
				keywords: '',
				activeTime: 0,
				activeIndex: 0,
				tabs: [],
				times: [],
				list: [],
				domArr: [],
				spotList: [],
				showSearch: false,
				detail: {},
				yuyueList: [],
				showTips: false,
			}
		},
		onShow() {
			this.showTips = true
			this.listTab()
			this.photosList()
			this.pageView('inclusionGW_InsightForumPage')
		},
		onHide() {
			this.showTips = false
		},
		watch: {
			En() {
				this.webForumList()
			}
		},
		methods: {
			bottomFn(item) {
				item.showWapJiabing = true
			},
			modifyFnSec() {
				protal.changeReservation(this.detail.uuid).then(res => {
					this.list.forEach(x => {
						x.yuyue = false
					})
					this.detail.yuyue = true
					this.showModify = false
				})
			},
			cancelReservationSec() {
				protal.cancelReservation(this.detail.uuid).then(res => {
					this.detail.yuyue = false
					this.showCancelReservation = false
				})
			},
			cancelReservation(item) {
				this.detail = item
				this.showCancelReservation = true
			},
			reservation(item) {
				protal.reservation(item.uuid).then(res => {
					this.list.forEach(x => {
						x.yuyue = false
					})
					item.yuyue = true
				}).catch(err => {
					if (err.code === '310005') {
						this.detail = item
						this.showModify = true
					}
				})
			},
			photosList() {
				protal.photosList({
					pageNum: 1,
					pageSize: 9999
				}).then(res => {
					this.spotList = res.data
				})
			},
			leftFn(index) {
				if (this.domArr[index].x < 0) {
					this.domArr[index].scrollTo(this.domArr[index].x + 500)
				}
			},
			rightFn(index) {
				if (this.domArr[index].x > this.domArr[index].maxScrollX) {
					this.domArr[index].scrollTo(this.domArr[index].x - 500)
				}
			},
			tabFn(index) {
				this.activeIndex = index
				this.jsAPI('inclusionGW_InsightForum_secNavigation', {
					firstNavigation_var: this.times[this.activeTime].name,
					position_var: index + 1,
					secondNavigation_var: this.tabs[index].name
				})
				this.webForumList()
			},
			timeFn(index) {
				this.activeTime = index
				this.jsAPI('inclusionGW_InsightForum_firstNavigation', {
					firstNavigation_var: this.times[this.activeTime].name,
				})
				this.webForumList()
			},
			listTab() {
				protal.listTab('2025').then(res => {
					this.tabs = res.data.forumTypes
					this.times = res.data.forumDates
					this.webForumList()
				})
			},
			queryReservationStatusList(arr) {
				return protal.queryReservationStatusList(arr).then(res => {
					const data = (res.data || [])
					return {
						yuyueList: data.filter(x => x.appointStatus == 1).map(x => x.forumUuid),
						yaoyueList: data.filter(x => x.forumStatus == 2).map(x => x.forumUuid),
						keyuyueList: data.filter(x => x.forumStatus == 1).map(x => x.forumUuid),
					}
				})
			},
			webForumList() {
				const params = {
					forumDate: this.times[this.activeTime].param,
					forumTypes: this.tabs[this.activeIndex].params,
					keywords: this.keywords,
					pageNum: 1,
					pageSize: 999,
					showType: this.En ? 'en' : 'cn',
					year: '2025'
				}
				protal.webForumList(params).then(async res => {
					if (this.keywords) {
						this.jsAPI('inclusionGW_serchClick', {
							searchWord_var: this.keywords,
							ifSearchResult_var: res.data && res.data.length ? '是' : '否'
						})
					}
					const obj = await this.queryReservationStatusList(res.data.map(x => x.uuid))
					this.list = res.data.map(x => {
						x.oldName = x.name
						x.name = this.itemTitle(x.name)
						x.nameEn = this.itemTitle(x.nameEn)
						x.showWapJiabing = false
						x.yuyue = obj.yuyueList.includes(x.uuid)
						x.yaoyue = obj.yaoyueList.includes(x.uuid)
						x.keyuyue = obj.keyuyueList.includes(x.uuid)
						return x
					})

					this.showSearch = !!this.keywords

					if (this.showSearch) {
						this.jsAPI('waitan_searchSuccess', {
							searchWord_var: this.keywords,
							ifSearchResult_var: this.list.length ? '是' : '否'
						})
					}

					this.domArr = []
				})
			},
			itemTitle(str) {
				if (this.keywords && str) {
					const reg = new RegExp(this.keywords, 'g')
					return str.replace(reg, `<span style="color: #7C5CFF">${this.keywords}</span>`)
				}
				return str
			},
			itemFn(item, index) {
				this.jsAPI('inclusionGW_InsightForumClick', {
					contentID_var: item.uuid,
					contentName_var: item.oldName,
					forumType_var: '无',
					forumSection_var: '无',
					forumLocation_var: item.forumAddrValue + '馆',
					firstNavigation_var: this.tabs[this.activeIndex].name,
					secondNavigation_var: this.times[this.activeTime].name,
					position_var: index + 1,
				})
				if (this.En) {
					if (item.liveUrl) {
						this.detail = item
						this.showMask = true
					}
					return
				}
				uni.navigateTo({
					url: `/pages/jianjieForum/detail?uuid=${ item.uuid }`
				})
				// location.href = location.origin + `/jianjieForumDetail?uuid=${ item.uuid }`
			},
		}
	}
</script>

<style lang="less" scoped>
	.flex-page {
		overflow: auto;
	}
	
	.jianjie-forum {
		background: #1E234B;
		position: relative;

		.head-img {
			width: 100%;
			display: block;
			margin-top: -1px;
		}

		.jianjie-content {
			width: 100%;
			padding: 20px 0 0;
			margin: 0 auto;

			.jianjie-spot-wrapper {
				padding: 0 18px 58px;
			}

			.jianjie-title {
				width: auto;
				height: 28px;
				margin-left: 18px;
			}

			.jianjie-top {
				display: flex;
				justify-content: space-between;

				.tabs-wrapper {
					width: 100%;
					overflow: hidden;
					position: relative;
					padding: 0 18px;

					.tab1 {
						padding: 0 18px;
						height: 100%;
						display: inline-flex;
						align-items: center;
						justify-content: center;
						font-family: AlibabaPuHuiTi_3_65_Medium;
						font-size: 15px;
						color: #FFFFFF;
						line-height: 15px;
						font-style: normal;
						white-space: nowrap;
						cursor: pointer;
						overflow: hidden;
						position: absolute;
						left: 0;
						top: 0;
						z-index: 1;
						pointer-events: none;

						span {
							position: relative;
							z-index: 1;
							font-size: 15px;
							line-height: 15px;
						}
					}
				}

				.tabs {
					display: flex;
					height: 54px;
					align-items: center;
					border-bottom: 1px solid rgba(255, 255, 255, 0.3);
					padding-bottom: 14px;
					width: 100%;
					overflow: auto;
					box-sizing: border-box;
					padding-top: 2px;

					.tab {
						padding: 0 12px;
						height: 40px;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: AlibabaPuHuiTi_3_65_Medium;
						font-size: 14px;
						color: #FFFFFF;
						line-height: 14px;
						font-style: normal;
						position: relative;
						white-space: nowrap;
						cursor: pointer;
						overflow: hidden;
						border: 1px solid rgba(255, 255, 255, 0.3);
						box-sizing: border-box;
						margin-right: 6px;

						span {
							position: relative;
							z-index: 1;
							font-size: 14px;
							line-height: 14px;
						}

						&.active {
							background: #7350F5;
							border-color: #7350F5;
						}
					}
				}

				.search {
					display: none;
					width: 340px;
					height: 56px;
					border: 1px solid rgba(22, 80, 255, 0.2);

					input {
						border: none;
						background: none;
						outline: none;
						flex: 1;
						padding-left: 20px;
						font-family: AlibabaPuHuiTi_3_45_Light;
						font-size: 16px;
						color: #FFFFFF;
						line-height: 22px;
						text-align: left;
						font-style: normal;

						&::placeholder {
							color: rgba(255, 255, 255, 0.6);
						}
					}

					i {
						display: flex;
						align-items: center;
						justify-content: center;
						flex: 0 0 56px;
						height: 100%;
						font-size: 24px;
						color: rgba(255, 255, 255, 0.4);
					}
				}
			}

			.times-wrapper {
				width: calc(100% - 18px);
				overflow: hidden;
				margin-left: 18px;
			}

			.times {
				display: inline-flex;
				flex-wrap: wrap;
				padding-top: 14px;

				.item {
					height: 28px;
					padding: 0 16px;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					border: 1px solid rgba(255, 255, 255, 0.5);
					font-family: AlibabaPuHuiTi_3_65_Medium;
					font-size: 14px;
					color: #FFFFFF;
					line-height: 14px;
					text-align: left;
					font-style: normal;
					cursor: pointer;
					margin-right: 6px;
					margin-bottom: 10px;
					white-space: nowrap;

					&.active,
					&:hover {
						background: #7350F5;
						border-color: #7350F5;
					}
				}
			}

			.list {
				margin-top: 56px;
				width: 100%;
				padding: 0 18px;
				position: relative;
				z-index: 1;
				box-sizing: border-box;
				padding-bottom: 50px;

				.item {
					position: relative;
					width: 100%;
					border: 1px solid #3C2DAA;
					margin-bottom: 54px;
					padding: 20px 12px 28px 12px;
					cursor: pointer;
					box-sizing: border-box;

					.yuyue {
						width: 100%;
						height: 40px;
						background-color: #3C2DAA;
						margin-top: 16px;
						display: flex;
						align-items: center;
						justify-content: center;

						.big {
							font-family: AlibabaPuHuiTi_3_65_Medium;
							font-size: 14px;
							color: #FFFFFF;
							line-height: 14px;
							text-align: center;
							font-style: normal;
							display: block;
						}

						small {
							padding-top: 3px;
							font-family: AlibabaPuHuiTi_3_45_Light;
							font-size: 10px;
							color: rgba(255, 255, 255, 0.6);
							line-height: 10px;
							text-align: center;
							font-style: normal;
							display: block;
						}

						&.yuyue1 {
							display: flex;
							align-items: center;
							justify-content: center;

							big {
								padding-top: 0;
							}
						}

						&.disabled {
							opacity: 0.5;
						}
					}

					.huifang {
						position: absolute;
						right: 0;
						top: 0;
						padding: 0 11px;
						height: 23px;
						background: #442DE7;
						display: flex;
						justify-content: center;
						align-items: center;
						font-family: AlibabaPuHuiTi_3_65_Medium;
						font-size: 11px;
						color: rgba(255, 255, 255, 0.8);
						line-height: 1;
						text-align: left;
						font-style: normal;

						img {
							width: 10px;
							height: auto;
							margin-right: 4px;
						}
					}

					&.small-padding-bottom {
						padding-bottom: 15px;
					}

					&:last-child {
						margin-bottom: 0;
					}

					.time {
						position: absolute;
						left: -1px;
						right: -1px;
						top: -32px;
						height: 32px;
						background: #3C2DAA;
						display: flex;
						align-items: center;
						font-family: AlibabaPuHuiTi_3_65_Medium;
						font-size: 12px;
						color: #FFFFFF;
						line-height: 15px;
						text-align: left;
						font-style: normal;
						padding-left: 12px;
						border: 1px solid #3C2DAA;
						border-bottom: none;
						box-sizing: content-box;
					}

					.title-wrapper {
						display: flex;
						align-items: center;
						margin-bottom: 10px;

						.title {
							font-family: AlibabaPuHuiTi_3_65_Medium;
							font-size: 18px;
							color: #FFFFFF;
							line-height: 26px;
							text-align: left;
							font-style: normal;
							margin-bottom: 6px;
							-webkit-line-clamp: 2;
						}

						.play-status {
							display: none;
						}

						.detail {
							display: none;
							// flex: 1;
							// font-family: AlibabaPuHuiTi_3_65_Medium;
							// font-size: 16px;
							// color: #442DE7;
							// line-height: 18px;
							// text-align: right;
							// font-style: normal;
						}
					}

					.text {
						font-family: AlibabaPuHuiTi_3_45_Light;
						font-size: 11px;
						color: #FFFFFF;
						line-height: 15px;
						text-align: left;
						font-style: normal;
						-webkit-line-clamp: 2;
					}

					.jiabings {
						position: relative;
						width: 100%;
						padding: 0;
						margin: 18px 0 0;
						overflow: hidden;
						background: rgba(22, 80, 255, 0);
						pointer-events: none;

						.jiabings-content {

							.jiabing-item {
								overflow: hidden;
								display: flex;
								cursor: pointer;
								margin-bottom: 16px;

								&:last-child {
									margin-bottom: 0;
								}

								.pic {
									width: 44px;
									height: 44px;
									background-size: cover;
									background-position: top center;
								}

								.jiabing-text {
									flex: 1;
									overflow: hidden;
									margin-left: 8px;

									h3 {
										font-family: AlibabaPuHuiTi_3_65_Medium;
										font-size: 12px;
										color: #FFFFFF;
										line-height: 12px;
										text-align: left;
										font-style: normal;
										margin-bottom: 6px;
									}

									p {
										font-family: AlibabaPuHuiTi_3_45_Light;
										font-size: 10px;
										color: rgba(255, 255, 255, 0.6);
										line-height: 1.3;
										text-align: left;
										font-style: normal;
									}
								}
							}
						}

						.right-icon {
							position: absolute;
							right: 0;
							top: 0;
							bottom: 0;
							display: none;
							align-items: center;
							padding: 0 5px;
							cursor: pointer;

							img {
								width: 20px;
							}
						}

						.left-icon {
							position: absolute;
							left: 0;
							top: 0;
							bottom: 0;
							display: none;
							align-items: center;
							padding: 0 5px;
							cursor: pointer;

							img {
								width: 20px;
								transform: rotate(180deg);
							}
						}
					}

					.guan {
						display: flex;
						align-items: flex-end;
						margin-top: 26px;

						.left {
							display: flex;
							align-items: flex-end;

							i {
								font-family: AlibabaSans102Ver2, AlibabaSans102Ver2;
								font-weight: bold;
								font-size: 24px;
								color: #7C5CFF;
								line-height: 24px;
								text-align: left;
								font-style: normal;
							}

							span {
								font-family: AlibabaPuHuiTi_3_45_Light;
								font-size: 12px;
								color: #FFFFFF;
								line-height: 1;
								text-align: left;
								font-style: normal;
							}
						}

						.right {
							display: flex;
							align-items: center;
							margin-left: 20px;

							img {
								width: 14px;
								height: 14px;
								margin-right: 4px;
							}

							.company {
								font-family: AlibabaPuHuiTi_3_45_Light;
								font-size: 12px;
								color: #FFFFFF;
								line-height: 12px;
								text-align: left;
								font-style: normal;

								span {
									margin-right: 6px;
								}
							}
						}
					}

					.company-bottom {
						position: absolute;
						left: 50%;
						bottom: 4px;
						transform: translateX(-50%);
						width: 16px;
						height: 16px;
					}


					&.item-en {

						.en-left {

							.en-left1 {
								font-family: AlibabaPuHuiTi_3_65_Medium;
								font-size: 16px;
								color: #FFFFFF;
								line-height: 16px;
								font-style: normal;
							}

							.en-left2 {
								font-family: AlibabaSans102Ver2, AlibabaSans102Ver2;
								font-weight: bold;
								font-size: 40px;
								color: #7350F5;
								line-height: 32px;
								font-style: normal;
								margin-top: 16px;
							}
						}

						.en-right {
							font-family: AlibabaPuHuiTi_3_65_Medium;
							font-size: 16px;
							color: #FFFFFF;
							line-height: 24px;
							text-align: left;
							font-style: normal;
							margin-top: 16px;
						}

						.en-right1 {
							font-family: AlibabaPuHuiTi_3_65_Medium;
							font-size: 16px;
							color: #fff;
							line-height: 18px;
							display: flex;
							font-style: normal;
							margin-top: 16px;

							img {
								width: 24px;
								height: 24px;
								margin-left: 4px;
							}

							&.disabled {
								color: #666788;
							}
						}
					}
				}
			}
		}
	}

	.width-enter-active,
	.width-leave-active {
		transition: 0.5s ease;
	}

	.width-leave-from,
	.width-leave-to {
		width: 0;
	}
</style>